@fluentui/react-window-provider

What is @fluentui/react-window-provider?

@fluentui/react-window-provider is a package that provides a React context for managing window-related properties and events. It is part of the Fluent UI library and is used to ensure that components can access and respond to window properties and events in a consistent manner.

What are @fluentui/react-window-provider's main functionalities?

WindowProvider

The WindowProvider component is used to wrap your application or a part of it to provide window-related context to its children. This ensures that all components within the provider can access and respond to window properties and events.

import { WindowProvider } from '@fluentui/react-window-provider';

const App = () => (
  <WindowProvider>
    <YourComponent />
  </WindowProvider>
);

useWindow

The useWindow hook allows you to access the window object within your functional components. This can be useful for responding to window size changes or other window-related events.

import { useWindow } from '@fluentui/react-window-provider';

const YourComponent = () => {
  const window = useWindow();

  return (
    <div>
      Window width: {window.innerWidth}
    </div>
  );
};

Other packages similar to @fluentui/react-window-provider

react-use

react-use is a collection of essential React hooks, including hooks for managing window events and properties. It provides hooks like useWindowSize and useWindowScroll, which offer similar functionalities to the useWindow hook in @fluentui/react-window-provider. However, react-use is a more general-purpose library with a broader range of hooks.

react-window

react-window is a library for efficiently rendering large lists and tabular data. While it is not specifically focused on window properties and events, it provides utilities for managing window-like behaviors in the context of virtualized lists. It is more specialized in handling large datasets compared to @fluentui/react-window-provider.

README

@fluentui/react-window-provider

A set of utilities for providing and consuming the window and document references in a contextual scope.

Why is this needed?

When rendering on the main browser window, many components need access to window or document for applying styling, listening for events, or measuring things. However it is possible to render to child windows and elements hosted in iframe elements.

In these cases, the target element is hosted in a different context, and thus have a different window reference. To aid in providing components with the correct instances of window or document, React context can be used to provide the tree of React components with the correct instance.

Usage

To consume the window or document object, call useWindow or useDocument respectively:

const Foo = () => {
  const win = useWindow();
  const doc = useDocument();

  return </>
}

To provide a new window other than the default, wrap your app in the WindowProvider to override the defaults contextually:

ReactDOM.render(
  <WindowProvider window={childWindow}>
    <...>
  </WindowProvider>,
  childWindowElement
);